<template>
	<view>
		<view class="top">
			<image class="bcg" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/ubcg.png" mode="">
			</image>
			<view :class="navbar.isshowtabbar ? 'navbarbcg' : ''" class="navbar"
				:style="{ paddingTop: statusBarHeight + 'px' }">
				<view class="navbar_c" :style="{ opacity: navbar.isshowtabbar ? 1 : 0 }">
					<view class="navbar_l flex">
						<image :src="userData.img" mode="aspectFill"></image>
						<view class="">{{ userData.name }}</view>
					</view>
				</view>
			</view>
			<view class="top_ads">
				<view class="user flex">
					<image @click="$pageGo('/pages/user/userinfo')" class="up" :src="userData.img" mode="aspectFill">
					</image>
					<view class="right_text" @click="$pageGo('/pages/user/userinfo')">
						<view class="t1 flex">
							{{ userData.name }}
							<image src="/static/right.png" mode=""></image>
						</view>
						<!-- vip0游客 1体验会员 2会员 -->
						<!-- vipType 0游客 1稻友 2稻使 3社长-->
						<view class="t2" v-if="userData.vipType">{{ $userStatus(userData.vipType) }}  {{ userData.vipNumber }}
						</view>
					</view>
					<view v-if="userData.vipType != 0" class="adsimg flex" @click="$pageGo('/pages/user/rwm')">
						<image src="/static/u4.png" mode=""></image>
						专属码
					</view>
				</view>
				<view class="top_ads_cont">
					<view class="hdz flex">
						<view v-if="userData.vip != 0" @click="$pageGo('/mypage/rice/index')" class="its flex"
							style="margin-right: 200rpx">
							<image class="i1" src="/static/u1.png" mode=""></image>
							<view class="text">
								<view class="">稻穗值 <text style="font-size: 28rpx;margin-left: 10rpx;">{{uni.getStorageSync('userData').points}}</text> </view>
								<view class="look">
									查看
									<image src="/static/right_h.png" mode=""></image>
								</view>
							</view>
						</view>
						<!--  -->
						<view class="its flex" @click="goactivity">
							<image class="i1" src="/static/u2.png" mode=""></image>
							<view class="text">
								<view class="">发起活动</view>
								<view class="look">
									查看
									<image src="/static/right_h.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="b_img">
						<image src="/static/u3.png" mode=""></image>
						<view class="b_img_ads flex_jc_sb">
							<view class="b_img_l">
								<view class="flex">
									<image v-if="userData.vipType == 0" class="i1" src="/static/uv1.png" mode="">
									</image>
									<!-- <image v-if="userData.vipType == 0" class="i1" src="/static/uv2.png" mode=""></image> -->
									<image v-if="userData.vipType == 1" class="i1" src="/static/uv3.png" mode="">
									</image>
									<image v-if="userData.vipType == 2" class="i1" src="/static/uv4.png" mode="">
									</image>
									<image v-if="userData.vipType == 3" class="i1" src="/static/uv5.png" mode="">
									</image>
									<!-- <image class="i1" src="/static/uv6.png" mode=""></image> -->
									<image class="i2" src="/static/u5.png" mode=""></image>
								</view>
								<view class="tt">点击查看了解会员权益详情</view>
							</view>
							<view class="b_img_r" @click="$pageGo('/mypage/member/index')">查看</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content_tabbar">
			<view class="tabbar_bcg" :style="{ top: navHeight + 'px' }">
				<view class="tabbar">
					<view class="items" :style="{ width: itemWidth }"
						:class="tabbar.activeId == item.id ? 'activeitem' : ''"
						v-for="(item, index) in tabbar.tabbarList" :key="index" @click="tabbarChange(item)">
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="tab-content-container" :style="{ height: scrollViewHeight + 'px' }">
				<usertabbar1 v-if="tabbar.activeId == 1" :scrollViewHeight="scrollViewHeight"
					:initialIsSticky="navbar.isSticky"></usertabbar1>
				<usertabbar2 v-if="tabbar.activeId == 2" :userData="userData" :scrollViewHeight="scrollViewHeight"
					:initialIsSticky="navbar.isSticky"></usertabbar2>
				<usertabbar3 v-if="tabbar.activeId == 3" :userData="userData" :scrollViewHeight="scrollViewHeight"
					:initialIsSticky="navbar.isSticky"></usertabbar3>
				<usertabbar4 v-if="tabbar.activeId == 4" :userData="userData" :scrollViewHeight="scrollViewHeight"
					:initialIsSticky="navbar.isSticky"></usertabbar4>
			</view>
		</view>

		<uni-popup ref="popupVip" type="center">
			<view class="popup">
				<uni-icons @click="popupVip.close()" class="icon" type="closeempty" size="24"
					color="#AEAEAE"></uni-icons>
				<image src="/static/vip.png" mode=""></image>
				<view class="title">成为稻浪会员</view>
				<view class="pop_btn" @click="govip">加入稻浪同歌</view>
			</view>
		</uni-popup>

		<uni-popup ref="popupRef" type="center">
			<view class="popup">
				<view class="title">发布失败！</view>
				<view class="pop_content">稻穗值低于{{ configData.activitySendPoints }}分不能发布！</view>
				<view class="pop_btn" @click="popupRef.close()">我知道了</view>
			</view>
		</uni-popup>
		<uv-tabbar :value="3" class="tab"></uv-tabbar>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		computed,
		onMounted,
		nextTick,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPageScroll,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	import usertabbar1 from '@/components/pageUser/usertabbar1/usertabbar.vue';
	import usertabbar2 from '@/components/pageUser/usertabbar2/usertabbar.vue';
	import usertabbar3 from '@/components/pageUser/usertabbar3/usertabbar.vue';
	import usertabbar4 from '@/components/pageUser/usertabbar4/usertabbar.vue';

	const instance = getCurrentInstance();
	const systemInfo = uni.getSystemInfoSync();
	const statusBarHeight = systemInfo.statusBarHeight || 0;
	const navbar = reactive({
		scrollTop: 0,
		topImgHeight: 0,
		isshowtabbar: false,
		isSticky: false,
		contentTabbarTop: 0,
		tabHeight: 0
	});

	const navHeight = ref(0);
	const scrollViewHeight = ref(0);

	const tabbar = reactive({
		tabbarList: [{
				name: '活动',
				id: 1
			},
			{
				name: '社区',
				id: 2
			},
			{
				name: '更多',
				id: 4
			}
		],
		activeId: 1
	});
	const popupRef = ref(null);
	const popupVip = ref(null);
	// 计算属性
	const itemWidth = computed(() => {
		return `${100 / tabbar.tabbarList.length}%`;
	});

	// 初始化计算所有需要的高度（只执行一次）
	const initializeHeights = () => {
		return new Promise((resolve) => {
			const query = uni.createSelectorQuery().in(instance.proxy);
			// 使用计数器确保所有查询完成
			let completedCount = 0;
			const totalQueries = 4;
			const checkComplete = () => {
				completedCount++;
				if (completedCount === totalQueries) {
					resolve();
				}
			};
			query
				.select('.navbar')
				.boundingClientRect((navbarRect) => {
					if (navbarRect) {
						navHeight.value = navbarRect.height;
					}
					checkComplete();
				})
				.exec();

			query
				.select('.tabbar')
				.boundingClientRect((adsRect) => {
					if (adsRect) {
						navbar.tabHeight = adsRect.height;
					}
					checkComplete();
				})
				.exec();

			// 滚动这里开始变色
			query
				.select('.top_ads_cont')
				.boundingClientRect((adsRect) => {
					if (adsRect) {
						navbar.topImgHeight = adsRect.height - 60;
					}
					checkComplete();
				})
				.exec();

			query
				.select('.content_tabbar')
				.boundingClientRect((contentRect) => {
					if (contentRect) {
						navbar.contentTabbarTop = contentRect.top - navHeight.value;
						// 全屏高度 减去头部高度 减去底部高度
						scrollViewHeight.value = systemInfo.safeArea.bottom - navHeight.value - navbar.tabHeight - 50;
					}
					checkComplete();
				})
				.exec();
		});
	};
	// 页面滚动处理
	onPageScroll((e) => {
		const {
			scrollTop
		} = e;
		navbar.scrollTop = scrollTop
		const isOverTopImg = scrollTop >= navbar.topImgHeight;
		const isScrollToContentTabbar = Math.ceil(scrollTop) >= navbar.contentTabbarTop;
		navbar.isSticky = isScrollToContentTabbar;
		// 设置导航栏颜色
		const navBarConfig = isOverTopImg ? {
			frontColor: '#000000',
			backgroundColor: '#ffffff'
		} : {
			frontColor: '#ffffff',
			backgroundColor: '#ffffff'
		};
		uni.setNavigationBarColor({
			...navBarConfig,
			animation: {
				duration: 400,
				timingFunc: 'easeIn'
			}
		});
		// 更新显示状态
		if (navbar.isshowtabbar !== isOverTopImg) {
			navbar.isshowtabbar = isOverTopImg;
		}
	});

	// 方法
	const tabbarChange = (e) => {
		tabbar.activeId = e.id;
	};
	// API 调用
	import {
		getUser
	} from '@/api/user.js';
	const userData = reactive({});
	const getUserInfo = () => {
		getUser().then((res) => {
			if (res.code == 200) {
				res.data.user.img = res.data.user.img === '' ? 'https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png' : res.data.user.img;
				if (res.data.user.vip == 2 && (res.data.user.vipType == 3 || res.data.user.vipType == 4) &&
					tabbar.tabbarList.length != 4) {
					tabbar.tabbarList.splice(2, 0, {
						name: '分社',
						id: 3
					});
					tabbar.activeId = 1;
				}
				Object.assign(userData, res.data.user);
			}
		});
	};
	import {
		getData,
		getConfig
	} from '@/api/login.js';
	onShow(() => {
		getUserInfo();
		getData({}).then((res) => {
			if (res.code == 200) {
				uni.setStorageSync('userData', res.data);
			}
		});
		getConfig({}).then((res) => {
			if (res.code == 200) {
				Object.assign(configData, res.data);
			}
		});
	});
	const configData = reactive({});
	// 发起活动 游客点击不能发起
	const goactivity = () => {
		if (userData.vip == 0) {
			popupVip.value.open();
			return;
		}
		if (uni.getStorageSync('userData').points < configData.activitySendPoints) {
			popupRef.value.open();
			return;
		}
		uni.navigateTo({
			url: '/mypage/activity/createactivity'
		});
	};
	const govip = () => {
		uni.navigateTo({
			url: '/mypage/member/index'
		});
		popupRef.value.close();
	};
	onLoad(() => {
		// 会长转让成功
		uni.$once('isManagement', function(e) {
			tabbar.tabbarList = [{
					name: '活动',
					id: 1
				},
				{
					name: '社区',
					id: 2
				},
				{
					name: '更多',
					id: 4
				}
			];
			tabbar.activeId = 1;
		});
		nextTick(() => {
			initializeHeights();
		});
	});
	onShareAppMessage(() => {
		return {
			title: '三次体验，十分欢迎。',
			imageUrl: 'https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy11.png',
			path: `pages/index/invitation?userID=${userData.id}`
		};
	});
	onShareTimeline(() => {
		return {
			title: '三次体验，十分欢迎。',
			imageUrl: 'https://www.daolangtongge.com/read-book-api/profile/mini_app/img/hy11.png',
			path: `pages/index/invitation?userID=${userData.id}`
		};
	});
</script>
<style lang="scss">
	page {
		background: #f3f0e8;
	}

	.popup {
		width: 620rpx;
		background: linear-gradient(180deg, #ece6d5 0%, #f7f8f6 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 32rpx 30rpx;
		box-sizing: border-box;
		text-align: center;

		.icon {
			display: block;
			text-align: right;
		}

		image {
			width: 140rpx;
			height: 148rpx;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #4e3f23;
			text-align: center;
			margin: 30rpx auto;
		}

		.pop_content {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #b19561;
			text-align: center;
			margin: 40rpx auto;
		}

		.pop_btn {
			width: 280rpx;
			height: 72rpx;
			background: #d8c6a7;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #75613e;
			text-align: center;
			line-height: 72rpx;
			margin: 0 auto;
		}
	}

	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.popup-date-picker {
		.uni-date {
			.uni-date-x {
				background: none;
				font-size: 24rpx !important;
				height: 56rpx;
				line-height: 56rpx;
			}

			.uni-date__x-input {
				height: 56rpx;
				line-height: 56rpx;
				font-size: 24rpx !important;
			}
		}
	}

	.tab-content-container {}

	.top {
		width: 100%;
		height: 620rpx;
		position: relative;
		margin: 0rpx;
		padding: 0rpx;

		.bcg {
			width: 100%;
			height: 620rpx;
			display: block;
		}

		.navbar {
			width: 100%;
			top: 0%;
			position: fixed;
			z-index: 2;
			height: 88rpx;
		}

		.navbarbcg {
			background: #ece6d5;
		}

		.navbar_c {
			width: calc(100% - 94px);
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;
			padding: 0rpx 20rpx 0rpx 15rpx;
			box-sizing: border-box;

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #75613e;
			}

			.down {
				width: 24rpx;
				height: 18rpx;
				margin-left: 15rpx;
			}

			.navbar_l {
				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
					margin-right: 20rpx;
				}

				font-family: PingFang SC,
				PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #1b1b1b;
			}
		}

		.top_ads {
			position: absolute;
			bottom: 24rpx;
			left: 0rpx;
			right: 0rpx;

			.user {
				width: 100%;
				height: 120rpx;
				margin-bottom: 16rpx;
				padding: 0rpx 0rpx 0rpx 20rpx;
				box-sizing: border-box;
				position: relative;

				.adsimg {
					position: absolute;
					width: 152rpx;
					height: 52rpx;
					background: #75613e;
					border-radius: 40rpx 0rpx 0rpx 40rpx;
					right: 0%;
					top: 20rpx;
					padding: 0rpx 0rpx 0rpx 18rpx;
					box-sizing: border-box;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}

					font-family: PingFang SC,
					PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #ffffff;
				}

				.up {
					width: 120rpx;
					height: 120rpx;
					border-radius: 60rpx;
				}

				.right_text {
					margin-left: 20rpx;

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #1b1b1b;

						image {
							width: 10rpx;
							height: 16rpx;
							margin-left: 6rpx;
						}
					}

					.t2 {
						display: inline-block;
						height: 32rpx;
						background: rgba(216, 198, 167, 0.5);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 1px solid #75613e;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #75613e;
						text-align: center;
						line-height: 32rpx;
						margin-top: 16rpx;
						padding: 0rpx 10rpx;
					}
				}
			}

			.top_ads_cont {
				.hdz {
					width: 100%;
					height: 92rpx;
					margin-bottom: 24rpx;
					padding: 0rpx 40rpx;
					box-sizing: border-box;

					.its {
						height: 92rpx;

						.i1 {
							width: 52rpx;
							height: 52rpx;
						}

						.text {
							margin-left: 20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #75613e;

							.look {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 20rpx;
								color: #aeaeac;

								image {
									width: 10rpx;
									height: 16rpx;
									margin-left: 6rpx;
								}
							}
						}
					}
				}

				.b_img {
					width: 710rpx;
					height: 172rpx;
					margin: 0rpx auto;
					position: relative;

					image {
						width: 710rpx;
						height: 172rpx;
					}

					.b_img_ads {
						width: 710rpx;
						height: 172rpx;
						position: absolute;
						top: 0;
						padding: 15rpx 26rpx 56rpx 26rpx;
						box-sizing: border-box;

						.b_img_l {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #b19561;

							.i1 {
								width: 60rpx;
								height: 60rpx;
								margin-right: 10rpx;
							}

							.i2 {
								width: 154rpx;
								height: 40rpx;
							}

							.tt {
								margin-top: 6rpx;
							}
						}

						.b_img_r {
							width: 152rpx;
							height: 56rpx;
							border-radius: 40rpx 40rpx 40rpx 40rpx;
							border: 1px solid #75613e;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #75613e;
							text-align: center;
							line-height: 56rpx;
						}
					}
				}
			}
		}
	}

	.content_tabbar {
		width: 100%;
		height: auto;
		margin-top: -75rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.tabbar_bcg {
			width: 100%;
			height: 80rpx;
			background: #ece6d5;
			position: sticky;
			z-index: 9;
		}

		.tabbar {
			width: 100%;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			background: #f3f0e8;
			display: flex;
			justify-content: space-around;
			height: 80rpx;
			line-height: 80rpx;

			.items {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #717171;
				transition: all 0.4s ease;
				text-align: center;
				position: relative;
				flex: 1;
			}

			.activeitem {
				font-weight: bold;
				color: #75613e;

				&::after {
					content: '';
					position: absolute;
					bottom: 4rpx;
					left: 50%; // 关键：水平居中
					transform: translateX(-50%); // 关键：向左移动自身宽度的一半
					width: 45rpx;
					height: 4rpx;
					background: #75613e;
					border-radius: 2rpx;
					animation: expandFromCenter 0.4s ease-out forwards;
				}
			}
		}
	}

	@keyframes expandFromCenter {
		0% {
			transform: translateX(-50%) scaleX(0);
			opacity: 0;
		}

		100% {
			transform: translateX(-50%) scaleX(1);
			opacity: 1;
		}
	}
</style>
